<template>
    <div class="navbar">
        <div id="nav-m" class="nav">
            <!-- 商品分类列表 -->
            <div class="w">
                <ul class="wlist">
                    <li
                        v-bind:class="{ active: Index == '/home/indexproduct' }"
                    >
                        <router-link to="/home/indexproduct">首页</router-link>
                    </li>
                    <li
                        @click="checknav()"
                        v-bind:class="{ active: Index == '/home/indexproduct' }"
                    >
                        <router-link to="/home/allproducts"
                            >全部商品</router-link
                        >
                    </li>
                    <li>
                        <el-tooltip
                            content="Bottom center"
                            placement="bottom"
                            effect="light"
                            style="border:1px "
                        >
                            <a style="font-size: 16px;">商品类别</a>
                            <div slot="content" style="width:200px;">
                                <!-- 4  包包-->
                                <el-tag
                                    class="tag"
                                    style="width:60px;font-size:14px;text-align:center"
                                    ><div class="pack" @click="get1()">
                                        {{ cfmes1 }}
                                    </div></el-tag
                                >
                                <!-- 1  裤子-->
                                <el-tag
                                    class="tag"
                                    style="width:60px;font-size:14px;text-align:center"
                                    type="info"
                                    ><div @click="get2()">
                                        {{ cfmes4 }}
                                    </div></el-tag
                                >
                                <!-- 3  帽子-->
                                <el-tag
                                    class="tag"
                                    style="width:60px;font-size:14px;text-align:center"
                                    type="warning"
                                    ><div @click="get3()">
                                        {{ cfmes5 }}
                                    </div></el-tag
                                >
                                <!-- 2  衣服-->
                                <el-tag
                                    class="tag"
                                    style="width:60px;font-size:14px;text-align:center"
                                    type="success"
                                    ><div @click="get4()">
                                        {{ cfmes3 }}
                                    </div></el-tag
                                >
                                <!-- 0  鞋子-->
                                <el-tag
                                    class="tag"
                                    style="width:60px;font-size:14px;text-align:center"
                                    type="danger"
                                    ><div @click="get5()">
                                        {{ cfmes2 }}
                                    </div></el-tag
                                >
                            </div>
                        </el-tooltip>
                    </li>
                    <li>
                        <a href="/about" class="router">后台管理系统</a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "navbar",
    data() {
        return {
            Index: document.location.hash,
            cfmes1: "包包",
            cfmes2: "鞋子",
            cfmes3: "衣服",
            cfmes4: "裤子",
            cfmes5: "帽子",
        };
    },
    methods: {
        checknav(index) {
            this.index = document.location.hash;
        },
        get1() {
            // 裤子--
            this.$router.push("/home/classification?cf=4");
        },
        get2() {
            //
            this.$router.push("/home/classification?cf=1");
        },
        get3() {
            //
            this.$router.push("/home/classification?cf=3");
        },
        get4() {
            //
            this.$router.push("/home/classification?cf=2");
        },
        get5() {
            //
            this.$router.push("/home/classification?cf=0");
        },
    },
};
</script>
<style lang="scss" scoped>
.nav {
    background-color: rgb(247, 247, 247);
    height: 90px;
    box-shadow: 0px 1px 2px -1px rgb(247, 247, 247);
    display: flex;
    align-items: center;
}
.fixd {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 80px;
    background-color: rgb(247, 247, 247);
    border: 1 solid rgb(237, 237, 237);
}
.w {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    line-height: 28px;
}
.wlist {
    display: flex;
    align-items: center;
}
.wlist li {
    height: 28px;
    line-height: 28px;
    display: flex;

    padding-left: 30px;
}
.wlist li:first-child {
    padding-left: 15px;
    // font-weight: bold;
}
.wlist li::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 13px;
    width: 2px;
    height: 2px;
    background: #bdbdbd;
}
.wlist li a {
    text-decoration: none;
    color: #646464;
}
.wlist li a:hover {
    color: rgb(75, 64, 224);
}
.tag {
    cursor: pointer;
}
</style>
